<template>
<el-row>
  <router-link to="/home">
    <el-col style="width:170px;margin-right:8px">
        <div style="cursor:pointer;background-color:#2eb979;color:#ffffff;font-size:24px">{{$store.getters.getValForKey("sysConfig").webName}}</div>
    </el-col>
  </router-link>
  <el-col style="width:200px;float:right" v-if="user!=null">
    <img class="navbarHeadImage" v-if="this.$store.getters.getUserInfo.thumbNailImage"  :src="this.proAPI.RESOURCE_URL+this.$store.getters.getUserInfo.thumbNailImage" />
    <img class="navbarHeadImage" v-else src="/static/img/defaultHead.jpg" />

    <el-dropdown @command="handleCommand" trigger="click">
      <span class="el-dropdown-link">
        欢迎 <div style="width:50px;float:left"  class="lue" v-html="this.$store.getters.getUserInfo.nickName?this.$store.getters.getUserInfo.nickName:'您'"></div> <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        <!--<el-dropdown-item>狮子头</el-dropdown-item>-->
        <!--<el-dropdown-item>螺蛳粉</el-dropdown-item>-->
        <!--<el-dropdown-item disabled>双皮奶</el-dropdown-item>-->
        <!--<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>-->
      </el-dropdown-menu>
    </el-dropdown>
  </el-col>
  <el-col v-else style="width:200px;float:right" >
    <el-dropdown @command="handleCommand" trigger="click">
      <span class="el-dropdown-link">
        欢迎 <span v-html="'您'"></span> <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        <!--<el-dropdown-item>狮子头</el-dropdown-item>-->
        <!--<el-dropdown-item>螺蛳粉</el-dropdown-item>-->
        <!--<el-dropdown-item disabled>双皮奶</el-dropdown-item>-->
        <!--<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>-->
      </el-dropdown-menu>
    </el-dropdown>
  </el-col>
  <!--<el-container>-->
    <!--<v-NavbarTop :nav_model="'horizontal'" ></v-NavbarTop>-->
  <!--</el-container>-->
</el-row>
</template>
<script type="es6">
const NavbarTop = () =>
  import ("@/components/menu/NavbarTop")
export default {
  components: {
    "v-NavbarTop": NavbarTop,
  },
  data() {
    return {
      user:null
    }
  },
  methods: {
    handleCommand(command){
      switch (command){
        case "logout":
          this.logout();
          break;
        default:break;
      }
    },
    logout(){
      const loading = this.$loading({
        lock: true,
        text: '退出登录...',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.proAPI.postJson(this.proAPI.URLS.logout).then((res) => {
          this.$store.commit("clearToken");
          loading.close();
          this.$router.replace("/login");
      })
    },
    getMyUserInfo(){
      this.proAPI.getJson(this.proAPI.URLS.getSysUserBaseInfoVo).then((res) => {
        this.user = this.proUtil.base64decode(res.data);
        this.$store.commit("saveUser", res.data);
      });
    }
  },
  beforeMount(){
    // console.log(this.$store.getters.getUserInfo);
    // console.log("33333333333333333333333")
  },
  mounted(){
    this.getMyUserInfo();
  }
}
</script>
<style scoped>
  .el-dropdown-link{
    color:#ffffff;
    cursor: pointer;
  }
  #homelink a{
    text-decoraction: none !important;
  }
  .router-link-active {
    text-decoration: none;
  }

  .navbarHeadImage{
    vertical-align:middle;
    width:30px;
    height:30px;
  }
</style>
